<template>
    <div>
        <div class="rushBox" @click="toGoodsInfo(goodsData.id)">
           <div class="goodsImg"><img :src="imgUrl(goodsData.img)" alt=""></div>
            <div class="title"><span>{{goodsData.name}}</span></div>
            <div class="button">
                <div class="money">
                    <div class="money1"> <span>￥{{goodsData.price}}</span></div>
                    <div class="money2"> <span>￥{{goodsData.rushprice}}</span></div>
                </div>
                
                <div class="progress">
                    <div class="proText">已售{{getRate()}}%</div>
                    <div class="proBar"><el-progress :percentage="getRate()" :show-text="false"></el-progress></div>
                    <div class="btn">   <el-button type="primary">立即抢购</el-button></div>
                </div>
                
            </div>
        </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'rushBuy',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
       
      }
    },
    props:{
        goodsData:{
            type:Object,
            default:{}
        }
    },
    computed: {},
    created() {},
    methods: {
        imgUrl(imgPath){
        return cfg.img_url+imgPath+ '?' + Date.now()
        
    },
    getRate(){
        var rate = ((this.goodsData.total-this.goodsData.number)/this.goodsData.total).toFixed(1) * 100
        return rate
    },
    toGoodsInfo(goodsId){
        // this.$router.push({ path: '/goodsinfo', query:{id:goodsId}})
        let routeData = this.$router.resolve({ path:`/goodsinfo?id=${goodsId}&rush=1` }); 
        window.open(routeData.href, '_blank');
    }

    }
  }
  </script>
  <style lang="scss" scoped>
       .rushBox{
        width: 290px;
        height: 400px;
        display: flex;
        flex-direction: column;
        // justify-content: flex-start;
        // align-items: flex-start;
        justify-content: center;
        // align-items: center;
        border: 1px rgb(213,213,213) solid;

        // background-color: rgb(243,243,243);
        cursor:pointer;
        .goodsImg{
            margin-left: auto;
            margin-right: auto;
            img{
                height: 200px;
                width: auto;
               
            }
        }
        .title{
            width: 250px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            font-size: 15px;
            margin: 20px 0;
            margin-left: 20px;
            
            span{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            
            
        }
        .button{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin-left: 20px;
            // display: flex;
            //     flex-direction: row;
            // width: 100%;
            // justify-content: flex-start;
            // align-items:flex-start;
            .money{
                display: flex;
                flex-direction: row;
                // justify-content: space-between;
                color: red;
                font-size: 25px;
                margin: 10px 0;
                .money1{
                    color: gray;
                    text-decoration: line-through;
                }
                .money2{
                    margin-left: 10px;
                }
               
            }
            .progress{
                display: flex;
                flex-direction: row;
                // justify-content: flex-start;
                align-items:center;
                .proText{
                    font-size: 10px;
                }
                .proBar{
                    width: 80px;
                    margin-top: 6px;
                    margin-left: 5px;
                }
                .btn{
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    margin-left: 30px;
                    
                }
            }
            
        }
       }
  </style>
  